<template>
  <div class="global-footer relative">
    <div class="container pt-16">
      <!--尾部各种文档链接-->
      <div class="w-full flex flex-row">
        <!--左边文档部分 -->
        <div class="flg:hidden flex flex-row flg:width">
          <div class="flex flex-2 py-2">
            <div class="flex flex-col items-center">
              <div class="flex w-full px-2 pt-2 pb-4">
                <span class="text-foot fs:fte">Resources</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt"> Leda </span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt">Kuksa.Val</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt">Velocitas</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt">Eclipse&nbsp;Foundation</span>
              </div>
            </div>
          </div>

          <div class="flex flex-2 py-2">
            <div class="flex flex-col items-center">
              <div class="flex w-full px-2 pt-2 pb-4">
                <span class="text-foot fs:fte">Legal</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt"> Terms&nbsp;of&nbsp;Use</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt">Privacy&nbsp;Policy</span>
              </div>
            </div>
          </div>
          <div class="flex flex-2 py-2">
            <div class="flex flex-col items-center">
              <div class="flex w-full px-2 pt-2 pb-4">
                <span class="text-foot fs:fte">Useful&nbsp;Links</span>
              </div>
              <div class="flex w-full px-2 py-2">
                <span class="text-foot fs:ftt">BOSCH</span>
              </div>
            </div>
          </div>
        </div>
        <!--右边二维码部分-->
        <div class="flex w-25 fsm:full">
          <div class="flex flex-col w-full">
            <div class="flex py-2 w-full items-center">
              <span class="text-foot w-full fs:fte">SDVOS CN NEWS</span>
            </div>
            <div class="flex py-2 justify-center">
              <div class="concact-size">
                <img src="@/assets/images/concact.png" alt="concact" width="100%" height="100%" />
              </div>
            </div>
            <div class="flex py-2 justify-center">
              <span class="text-foot fs:ftt">Scan QR Code via Wechat</span>
            </div>
          </div>
        </div>
      </div>

      <div class="flex w-full">
        <div class="w-full py-4">
          <span class="text-foot fs:fte"> © 2023 ETAS GmbH </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.global-footer {
  width: 100%;
  background-color: #202337;
}

.text-foot {
  color: #a3a3a3;
}

.flg\:width {
  width: 75%;
}

@media (max-width: 743px) {
  .flg\:hidden {
    display: none;
  }
  .fsm\:full {
    width: 100%;
  }
}

.bg-og {
  background-color: orange;
}
.bg-pk {
  background-color: pink;
}
.flex-2 {
  flex-basis: 174px;
  flex-grow: 1;
  flex-shrink: 1;
}
.fs\:fte {
  font-size: 18px;
}
.fs\:ftt {
  font-size: 16px;
}

@media (min-width: 1024px) {
  .fs\:fte {
    font-size: 22px;
  }
  .fs\:ftt {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  .fs\:fte {
    font-size: 24px;
  }
  .fs\:ftt {
    font-size: 20px;
  }
}

.concact-size {
  width: 200px;
  height: 200px;
}

@media (min-width: 744px) {
  .concact-size {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 1024px) {
  .concact-size {
    width: 220px;
    height: 220px;
  }
}

@media (min-width: 1440px) {
  .concact-size {
    width: 240px;
    height: 240px;
  }
}
</style>
